import {
  Scene,
  LineLayer,
  PointLayer
} from '@antv/l7';
import {
  GaodeMap
} from '@antv/l7-maps';

const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    center: [ 120.15, 30.3 ],
    zoom: 10,
    style: 'light'
  })
});

const pointLayer = new PointLayer()
  .source([{ lng: 120.155, lat: 30.31 }], {
    parser: {
      type: 'json',
      x: 'lng',
      y: 'lat'
    }
  })
  .shape('circle')
  .size(6000)
  .color('#f00')
  .animate(true)
  .style({
    unit: 'meter'
  });
const lineLayer = new LineLayer({})
  .source({
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [
              120.18630981445312,
              30.321915039121063
            ],
            [
              120.34011840820312,
              30.434465946142005
            ]
          ]
        }
      },
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [
              120.19660949707033,
              30.298796461361665
            ],
            [
              120.31883239746092,
              30.28041626667403
            ]
          ]
        }
      },
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [
              120.12245178222656,
              30.29523927312319
            ],
            [
              120.01808166503906,
              30.261439550638762
            ]
          ]
        }
      },
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [
              120.15609741210938,
              30.285159872426014
            ],
            [
              120.14923095703124,
              30.20626765511821
            ]
          ]
        }
      },
      {
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [
              120.10940551757812,
              30.320136880604423
            ],
            [
              120.01327514648438,
              30.362803774813028
            ]
          ]
        }
      }
    ]
  }
  )
  .size(2)
  .shape('line')
  .style({
    arrow: {
      enable: true,
      arrowWidth: 4,
      arrowHeight: 4,
      tailWidth: 0.4
    }
  })
  .color('#f00');
scene.on('loaded', () => {
  scene.addLayer(pointLayer);
  scene.addLayer(lineLayer);
});
